<template>
  <div class="container">
    <div class="wrapper">
      <div class="pic-404">
        <img class="pic-404__parent" src="@/assets/images/404.png" alt="404页面丢失" >
      </div>
      <div class="box">
        <div class="box__404">404</div>
        <div class="box__title">UH OH! 页面丢失</div>
        <div class="box__info">您所寻找的页面不存在。你可以点击下面的按钮，返回主页。</div>
        <a href class="box__home">返回首页</a>
      </div>
    </div>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss">
.container {transform: translate(-50%, -50%);position: absolute;top: 40%;left: 50%;}
.wrapper {
  position: relative;width: 1200px;padding: 0 50px;overflow: hidden;
  .pic-404 {position: relative;float: left;width: 600px;overflow: hidden; &__parent {width: 100%;margin-top:40px;}
  }
  .box {position: relative;float: left;padding: 30px 0;overflow: hidden;
    &__404 {font-size: 10em;font-weight: bold;color: #1482f0;opacity: 0;margin-bottom: 20px;animation-name: slideUp;animation-duration: 0.5s;animation-fill-mode: forwards;}
    &__title {font-size: 2em;line-height: 24px;color: #222;font-weight: bold;opacity: 0;margin-bottom: 10px;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.1s;animation-fill-mode: forwards;}
    &__info {font-size: 1em;line-height: 21px;color: grey;opacity: 0;margin-bottom: 30px;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.2s;animation-fill-mode: forwards;}
    &__home {display: block;float: left;width: 110px;height: 36px;background: #1482f0;border-radius: 100px;text-align: center;color: #ffffff;opacity: 0;font-size: 14px;line-height: 36px;cursor: pointer;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.3s;animation-fill-mode: forwards;}
    @keyframes slideUp {
      0% {transform: translateY(60px);opacity: 0;}
      100% {transform: translateY(0);opacity: 1;}
    }
  }
}
</style>
